import { Link } from '@brillout/docpress'

import { UiFrameworkExtension, ProvidedBy, OnlyHtmlNote, ConfigSpec } from '../../components'

<ConfigSpec
  env="server"
  providedBy={<ProvidedBy noCustomGuide />}
>
```ts ts-only hide-menu
type Value = string | null | undefined
type Description = Value | ((pageContext) => Value)
```
</ConfigSpec>

> See <Link href="/head-tags" /> for a general introduction about `<head>` tags.

The `description` setting sets the [SEO description tags](https://moz.com/learn/seo/meta-description).

```ts
// pages/+config.ts

import type { Config } from 'vike/types'

export default {
  description: 'This website is a Vike demo.'
} satisfies Config
```

> It adds
> [`<meta name="description">`](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata)
> and
> [`<meta property="og:description">`](https://ogp.me)
> to `<head>`:
>
>
> ```html
> <head>
>   <meta name="description" content="This website is a Vike demo.">
>   <meta property="og:description" content="This website is a Vike demo.">
> </head>
> ```

You can set its value using a <Link href="/pageContext">`pageContext`</Link> function:

```ts
// pages/some-page/+description.ts
// Environment: server, client

import type { Data } from './+data'
import type { PageContextServer } from 'vike/types'

export function description(pageContext: PageContextServer<Data>) {
  return pageContext.data.product.description
}
```


## Under the hood

<OnlyHtmlNote />


## See also

- [Moz > Learn SEO > What Are Meta Descriptions and How to Write Them](https://moz.com/learn/seo/meta-description)
- <Link href="/head-tags" />
- <Link href="/settings#html-shell" doNotInferSectionTitle />
